<template>
  <div class="home">
    <el-row :gutter="15">
      <el-col v-for="(card,index) in web_card_data" :key="index" :xs="12" :sm="12" :md="12" :lg="6">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>
              <!-- <i :class="car.card_title_icon" /> -->
              {{$t(card.title)}}
            </span>
           </div>
          <div  slot="header" class="clearfix">
            <!-- <div class="cycle" :style="{backgroundColor:car.card_cycle_back_color}">{{car.card_cycle}}</div> -->
            <h2 style="font-size:90%;"> {{card.value}}</h2>
          </div>

          <br />
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-row v-if="menus" :gutter="15" style="margin-top:5px; text-align:center">
      <el-col :xs="12" :sm="12" :md="6" :lg="3" v-for="(item,index) in menus" :key="index">
        <router-link :to="item.url">
          <el-card shadow="hover">
            <el-image :src="item.menu_pic"  style="width: 32px; height: 32px"></el-image>
            <div class="icon_title">{{item.title}}</div>
          </el-card>
        </router-link>
      </el-col>
    </el-row> -->
    
  </div>
</template>
<script>
import { homeData  } from '@/api/admin/base'
export default {
  data() {
    return {
      web_card_data: [],
      doPlay:0,
      unpaid:0,
      intervalId:null,
   
    }
  },
  methods: {
    cardData(){
        homeData().then(res => {
          if(res.status == 200){
            this.web_card_data=res.data
              // this.web_card_data = res.card_data
              // this.doPlay=res.play
              // this.unpaid=res.unpaid
              // if(this.doPlay ==1){ 
              //   //this.playAudio('./static/audio/collect_over.mp3')
              //    setTimeout(() => this.playAudio('./static/audio/collect_over.mp3'),1000)
              //   }
              // if(this.doPlay ==2){ 
              //    //this.playAudio('./static/audio/pay_balance.mp3')
              //   setTimeout(() => this.playAudio('./static/audio/pay_balance.mp3'),1000)

              //   }
              // if(this.doPlay ==3){ 
              //    setTimeout(() => this.playAudio('./static/audio/collect_over.mp3'), 1000)
              //    setTimeout(() => this.playAudio('./static/audio/pay_balance.mp3'), 3000)
              //    //this.playAudio('./static/audio/collect_over.mp3')
              //    //this.playAudio('./static/audio/pay_balance.mp3')
              //   }
              
              // if(this.unpaid >0){
              //    setTimeout(() => this.playAudio('./static/audio/unpaid.mp3'), 5000)
              //     //this.playAudio('./static/audio/unpaid.mp3')
              // }
            
          }
        })
    },
     dataRefresh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
       // console.log("刷新" + new Date());
        this.cardData(); //加载数据函数
      }, 120000);
    }, 
  // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
  },  
    
    playAudio(file){
     // var audio = new Audio(require('./file.mp3')); // path to file
     var audio = new Audio();
      audio.src=file;
      audio.play();

    },
   
  },
 
  mounted () {
    this.cardData()
    this.dataRefresh();
  },
  destroyed(){
    // 在页面销毁后，清除计时器
    this.clear();
  }
};
</script>
<style scoped>
.home .el-card{
  margin-bottom: 10px;
}
.cycle {
  width: 30px;
  height: 25px;
  line-height: 25px;
  float: right;
  border-radius: 3px;
  color: white;
  text-align: center;
  margin-top:-5px
}
.icon_title{margin-top:10px;color:#909399}
</style>